<template>
  <div class="app-container">
      <div class="quanbtn-btn">
        <el-select v-model="role" placeholder="请选择角色" filterable @change="selectchange"  style="margin-right: 10px">
          <el-option
            v-for="item in options"
            :key="item.id"
            :value="item"
            :label="item.title"
          >
          </el-option>
        </el-select>
        <el-button type="primary" plain size="medium" @click="Increaserole">修改角色名</el-button>
        <el-button type="success" plain size="medium" @click="addrole">添加角色</el-button>
        <el-button type="warning" plain size="medium" @click="removerole">清空</el-button>

      </div>
    <div class="app-contain">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>角色权限管理</span>
          <el-button plain style="padding: 8px 6px; float: right" type="primary">操作按钮</el-button>
        </div>
        <el-collapse @change="change" title="角色" accordion >

          <el-collapse-item :name="roles.id" :title="roles.title"  v-for="(roles ,index) in roleMenus" :key="index">
           <el-card >
             <span>管理权限</span>
             <el-button type="danger" plain style="float: right" size="mini" @click="deleterole">删除选中角色</el-button>
           </el-card>
            <el-tree
              :data="allMenus"
              accordion
              show-checkbox
              :default-checked-keys=[]
              :props="defaultProps">
            </el-tree>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </div>
  </div>
</template>
<script>
import request from "@/utils/request";

export default {
  name: 'Role',
  data() {
    return {
      role:[],
      roleMenus:[],
      activeNames:'',
      options:'',
      itemid:'',
      dialogFormpermiss:false,
      //修改权限
      Modifypermiss:{
        username:''
      },
      allMenus:[],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  created() {
    this.collapseItem()
  },
  methods:{
    change(rid){
      console.log(rid)
      if (rid){
        this.getallMeuns()
      }
    },
    getallMeuns(){//获取系统管理权限信息
      request.post('/systems').then( (resp)=>{
        if (resp){
          this.allMenus =resp.data
        }
      })
    },
    collapseItem(){
      request.post('/systems/roles').then( (resp)=>{
            if (resp){
              this.roleMenus =resp.data
              this.options =resp.data
        }
      })
    },
      //修改角色名
    selectchange(item){
     this.itemid = item
    },
      Increaserole() {
      console.log(this.itemid)
        if (!(this.role === '')) {
          this.$prompt('新角色名:', '修改角色名', {
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          }).then(({ value }) => {
            request.post('/systems/roles'+this.itemid, value).then( (resp)=>{
              if (resp){
                console.log(resp)
                this.$message({
                  type: 'success',
                  message: '你的新角色名是:' + value
                });
                this.collapseItem()
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消输入'
            });
          });
        }else {
          this.$message.error('请输入要修改的角色名')
        }
        this.role =''
      },
      //添加角色
      addrole(){
          this.$prompt('角色名:', '新增角色名:', {
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          }).then(({ value }) => {
            this.$message({
              type: 'success',
              message: '你的新增角色名是: ' + value
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消输入'
            });
          });
        },
      //删除选中角色
      deleterole(rid){
       console.log(rid)
        this.Modifypermiss.username =this.role

      },
      //保存
      saverole(){

      },
      //清空
      removerole(){
        this.role =''
      }
  }
}
</script>
<style scoped>
.app-contain{
  width: 90%;
  margin: 20px 0;
}
</style>
